<template>
  <view class="couple-wrap">
    <view class="couple-roof">
      <view class="couple-top">
        <text></text>
        <text>个人反馈</text>
      </view>
      <view class="couple-cen">
        <view
          @click="chooseItem(item)"
          v-for="(item, index) in coupleData"
          :key="index"
          class="couple-cen-item"
        >
          <view class="couple-cen-item-t-t"
            ><text v-if="item.grade || item.grade == 0">已填写</text></view
          >
          <view
            v-if="item.name !== '其它'"
            class="couple-cen-item-t"
            :class="
              !item.grade && item.grade !== 0
                ? ''
                : item.grade > 0 && item.grade <= 50
                ? 'risk'
                : 'normal'
            "
          >
            <!-- <view v-if="item.name !== '其它'" class="couple-cen-item-t">					 -->
            <!-- <text v-if="item.grade && item.grade !== '0'">{{item.grade}}</text>
						<text class="no-write" v-else>未填写</text> -->
            <text v-if="item.grade || item.grade === 0">{{ item.grade }}</text>
            <text class="no-write" v-else-if="!item.grade && item.grade !== 0"
              >未填写</text
            >
          </view>
          <view class="couple-cen-item-b">
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="couple-roof">
      <view class="couple-top">
        <text></text>
        <text>体质健康</text>
      </view>
      <view class="couple-cen">
        <view
          @click="chooseItem(item)"
          v-for="(item, index) in corporeity"
          :key="index"
          class="couple-cen-item"
        >
          <view class="couple-cen-item-t-t"
            ><text v-if="item.grade || item.grade === 0">已填写</text></view
          >
          <view
            v-if="item.name !== '其它'"
            class="couple-cen-item-t"
            :class="
              !item.grade && item.grade !== 0
                ? ''
                : item.grade >= 0 && item.grade <= 50
                ? 'risk'
                : 'normal'
            "
          >
            <!-- <view v-if="item.name !== '其它'" class="couple-cen-item-t">					 -->
            <text v-if="item.grade || item.grade === 0">{{ item.grade }}</text>
            <text class="no-write" v-else-if="!item.grade && item.grade !== 0"
              >未填写</text
            >
          </view>
          <view class="couple-cen-item-b">
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view v-if="currentItem.no && fromType" class="couple-main">
			<view class="couple-main-t couple-top">
				<text></text>
				<text>{{currentItem.name}}</text>
			</view>
			<view class="couple-main-m">
				<question-naire :key="currIndex" :comfromType="fromType" :activityNo="currentItem.no"></question-naire>				
			</view>
		</view> -->
    <view class="cu-modal bottom-modal" :class="{ show: isShowMore }">
      <view class="cu-dialog">
        <view class="couple-more-wrap">
          <view class="couple-more-top">
            <text></text>
            <text>更多</text>
          </view>
          <view class="more-couple-cen-wrap">
            <view class="couple-cen more-couple-cen">
              <view
                @click="chooseMoreItem(item)"
                v-for="(item, index) in moreCoupleData"
                :key="index"
                :class="
                  currentItem.name === item.name ? 'couple-cen-item-active' : ''
                "
                class="couple-cen-item"
              >
                <view
                  v-if="item.name !== '其它'"
                  class="couple-cen-item-t"
                  :class="
                    item.grade === 0
                      ? ''
                      : item.grade >= 0 && item.grade <= 50
                      ? 'risk'
                      : 'normal'
                  "
                >
                  <text>{{ item.grade }}</text>
                </view>
                <view class="couple-cen-item-b">
                  <text>{{ item.name }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import questionNaire from '@/questionnaire/index/index';
export default {
  name: 'couple',
  components: { questionNaire },
  data () {
    return {
      isShowMore: false,
      coupleData: [
        {
          name: '基本信息',
          grade: null,
          no: '20201105104133000163'
        },
        {
          name: '疾病历史',
          grade: null,
          no: '20201105115153000168'
        },
        {
          name: '遗传史',
          grade: null,
          no: '20201105111540000164'
        },
        {
          name: '运动情况',
          grade: null,
          no: '20201109095316000178'
        },
        {
          name: '饮食情况',
          grade: null,
          no: '20201106104133000174'
        },
        {
          name: '健康素养',
          grade: null,
          no: '20201109105128000186'
        },
        {
          name: '睡眠健康',
          grade: null,
          no: '20201109104327000185'
        },
        {
          name: '心理健康',
          grade: null,
          no: '20201109103435000184'
        },
        {
          name: '环境健康',
          grade: null,
          no: '20201109102605000183'
        }
        // ,{
        // 	name:'其它',
        // 	grade:0
        // },
      ],
      corporeity: [
        {
          name: '阴虚质体质',
          grade: null,
          no: '20201112110542000192'
        },
        {
          name: '气郁质体质',
          grade: null,
          no: '20201112112218000193'
        },
        {
          name: '血瘀质体质',
          grade: null,
          no: '20201112113200000194'
        },
        {
          name: '痰湿质体质',
          grade: null,
          no: '20201112114401000195'
        },
        {
          name: '湿热质体质',
          grade: null,
          no: '20201112143740000196'
        },
        {
          name: '特禀质体质',
          grade: null,
          no: '20201112145435000197'
        },
        {
          name: '阳虚质体质',
          grade: null,
          no: '20201112105018000191'
        },
        {
          name: '气虚质体质',
          grade: null,
          no: '20201112104036000190'
        },
        {
          name: '平和质体质',
          grade: null,
          no: '20201112103143000189'
        }
      ],

      moreCoupleData: [
        {
          name: '基本信息',
          grade: 0,
          no: '20201105104133000163'
        },
        {
          name: '疾病历史',
          grade: 50,
          no: '20201105115153000168'
        },
        {
          name: '遗传史',
          grade: 20,
          no: '20201105111540000164'
        },
        {
          name: '运动情况',
          grade: 80,
          no: '20201109095316000178'
        },
        {
          name: '饮食情况',
          grade: 40,
          no: '20201106142616000177'
        },
        {
          name: '健康素养',
          grade: 75,
          no: '20201109105128000186'
        },
        {
          name: '睡眠健康',
          grade: 60,
          no: '20201109104327000185'
        },
        {
          name: '心理健康',
          grade: 85,
          no: '20201109103435000184'
        }
      ],
      currentItem: '',
      fromType: '',
      currIndex: 0
    };
  },
  methods: {
    /*点击更多之中的菜单**/
    chooseMoreItem (item) {
      console.log('点击更多---->', item);
      uni.navigateTo({
        url: `/questionnaire/index/index?formType=form&activity_no=${item.no}&status=进行中`
      });
      return;
      this.isShowMore = false;
      this.currentItem = item;
      let isHas = false;
      this.coupleData.forEach(more => {
        if (more.name === item.name) {
          isHas = true;
        }
      });
      if (!isHas) {
        this.coupleData[ this.coupleData.length - 2 ] = item;
      }
    },
    /*获取分数**/
    async getScore (item) {
      let url = this.getServiceUrl('daq', 'srvdaq_record_reply_select', 'select');
      let req = {
        serviceName: 'srvdaq_record_reply_select',
        colNames: [ '*' ],
        condition: [
          {
            colName: 'activity_no',
            ruleType: 'eq',
            value: item.no
          },
          {
            colName: 'user_no',
            ruleType: 'eq',
            value: uni.getStorageSync('login_user_info').user_no
          },
          {
            colName: 'state',
            ruleType: 'eq',
            value: '完成'
          }
        ]
      };
      let res = await this.$http.post(url, req);
      if (res.data.data.length > 0) {
        item.grade = res.data.data[ 0 ].score;
      }
      console.log('------分数-------', res.data.data);
    },
    /*点击首页顶部菜单**/
    async chooseItem (item) {
      this.currentItem = item;
      if (item.name === '其它') {
        this.isShowMore = true;
      }
      uni.navigateTo({
        url: `/questionnaire/index/index?formType=form&activity_no=${item.no}&status=进行中`
      });
    },
    /*查询问卷内容**/
    async selectQuestion () {
      let self = this;
      let url = this.getServiceUrl('daq', 'srvdaq_record_reply_select', 'select');
      let req = {
        serviceName: 'srvdaq_record_reply_select',
        colNames: [ '*' ],
        condition: [
          {
            colName: 'activity_no',
            ruleType: 'eq',
            value: this.currentItem.no
          },
          {
            colName: 'user_no',
            ruleType: 'eq',
            value: uni.getStorageSync('login_user_info').user_no
          },
          {
            colName: 'state',
            ruleType: 'eq',
            value: '完成'
          }
        ]
      };
      let res = await this.$http.post(url, req);
      return res.data.data;
    }
  },
  onLoad () {
    this.currentItem = this.coupleData[ 0 ];

    // this.chooseItem(this.currentItem)
  },
  onShow () {
    this.coupleData.forEach(item => {
      if (item.no) {
        this.getScore(item);
      }
    });
    this.corporeity.forEach(core => {
      if (core.no) {
        this.getScore(core);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.couple-wrap {
  min-height: 100vh;
  background-color: white;
  .couple-roof {
    .couple-top {
      padding: 15px;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      text {
        &:first-child {
          width: 8rpx;
          height: 32rpx;
          background-color: #0081ff;
          border-radius: 8rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .couple-cen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .couple-cen-item {
      width: 30%;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px,
        rgba(0, 0, 0, 0.04) 0px 0px 6px;
      margin: 10rpx;
      border-radius: 14rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10rpx 0 20rpx;
      border: 1px solid transparent;
      .couple-cen-item-t-t {
        width: 100%;
        text-align: right;
        margin-bottom: 10rpx;
        padding-right: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
      .couple-cen-item-t {
        font-size: 72rpx;
        color: #ccc;
        font-weight: 600;
        line-height: 72rpx;
        .no-write {
          font-size: 32rpx;
        }
      }
      .risk {
        // color: #ff0707;
        color: #e54d42;
      }
      .normal {
        color: #39b54a;
      }
      .couple-cen-item-b {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .couple-cen-item-active {
      border-color: #f37b1d;
    }
  }

  .more-couple-cen {
    justify-content: flex-start;
    margin-left: 10rpx;
  }
  .couple-main {
    .couple-main-m {
      max-height: calc(100vh - 600rpx);
      overflow-y: scroll;
    }
  }
  .couple-more-wrap {
    height: 100vh;
    .couple-more-top {
      padding: 15px;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      text {
        &:first-child {
          width: 8rpx;
          height: 32rpx;
          background-color: #0081ff;
          border-radius: 8rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>
